<template>
  <div class="home">
    <!-- 首页搜索框 -->
    <div class="header_input">
      <van-search v-model="value" placeholder="搜索商品" @click="onSearch" />
    </div>
    <!-- 分类 -->
    <div class="home_category_container">
      <div class="home_category_wrapper">
        <div
          :class="selectIndex === index?'home_category_item_active':'home_category_item'"
          v-for="(item,index) in category"
          :key="index"
          @click="onSelect(index)"
        >{{item.title}}</div>
      </div>
    </div>
    <!-- 筛选 -->
    <div class="home_sort_container">
      <div>综合</div>
      <div>销量</div>
      <div>新品</div>
      <div @click="priceSort()">价格</div>
    </div>
    <!-- 商品列表数据 -->
    <div class="shopping_list_container">
      <div class="shopping_list_item" v-for="(item,index) in showList" :key="index">
        <div class="list_item_img">
          <img :src="item.pic" alt />
        </div>
        <div class="list_item_title">{{item.title}}</div>
        <div class="list_item_price">￥{{item.price}}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios';

export default {
  name: "Home",
  components: {},
  data() {
    return {
      value: ""
    };
  },
  computed: {
    category() {
      return this.$store.state.category;
    },
    showList() {
      return this.$store.state.showList;
    },
    selectIndex() {
      return this.$store.state.selectIndex;
    }
  },
  methods: {
    onSearch() {
      this.$router.push("/search");
    },
    onSelect(index) {
      this.$store.dispatch("CHANGE_SELECT", index);
    },
    priceSort(){
      this.$store.dispatch('PRICE_SORT')
    }
  },
  mounted() {
    this.$store.dispatch("GET_CATEGORY");
    this.$store.dispatch("GET_SHOPPING_LIST");
  }
};
</script>

<style scoped>
.home {
  width: 100%;
}
.home_category_container {
  width: 100%;
  height: 50px;
  overflow-x: scroll;
  white-space: nowrap;
}
.home_category_wrapper {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.home_category_item {
  margin: 5px;
  padding: 5px;
  border-bottom: 3px solid #fff;
}
.home_category_item_active {
  margin: 5px;
  padding: 5px;
  border-bottom: 3px solid gray;
}
.home_sort_container {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.home_sort_container div {
  margin: 10px;
}
.shopping_list_container {
  width: 100%;
  height: 490px;
  overflow-y: scroll;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.shopping_list_item {
  width: 45%;
  height: 240px;
  border: 1px solid gray;
  margin-left: 3%;
  margin-top: 3%;
}
.list_item_img {
  width: 100%;
}
.list_item_img img {
  height: 180px;
  width: 100%;
}
.list_item_title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 5px 0px;
}
.list_item_price {
  color: red;
}
</style>
